import React from "/src/lib/react";
const path = require('path');
const fs = require('fs');
const { dialog } = window.require('electron').remote;
const ipcRenderer = window.require('electron').ipcRenderer;
// import './index.less'

class Initial extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			projectPath: '',
			config: {
				name: '暂无'
			},
		};
	}
	componentDidMount() {


	}
	/**
	 * 读取工程配置
	 * @param {*} path 
	 */
	readConfig(dir) {
		const that = this;
		// 这里是接收主进程传递过来的参数，这里的on要对应主进程send过来的名字
		ipcRenderer.on("read-finish", function (event, arg) {
			const config = JSON.parse(arg);
			// 这里的arg是从主线程请求的数据
			if (config) {
				console.log("render+" + config);
				that.setState({
					config: `小程序appId：${config.appid}
					项目名称：${config.projectname}
					基础库版本号：${config.libVersion}`
				})

			}
		});
		const filePath = path.resolve(dir, 'project.config.json')
		// 这里的会传递回给主进程，这里的第一个参数需要对应着主进程里on注册事件的名字一致
		ipcRenderer.send("read-file", filePath);


	}

	chooseDir() {
		console.log("chooseDir")
		dialog.showOpenDialog({
			title: '选择目录',
			defaultPath: '/Users/junyitan/Desktop/doctorwork/iPenguinDoctor_qa/dist/',
			buttonLabel: '确认选择',
			properties: ['openFile', 'openDirectory']
		}).then(({ filePaths }) => {
			console.log('%c 初始化目录', 'color: red', filePaths)
			this.readConfig(filePaths[0]);
			this.setState({
				projectPath: filePaths[0]
			})
		})
	}

	lauch() {
		const { projectPath } = this.state;
		console.log("开始启动项目：", projectPath)
		ipcRenderer.send("launch-app", projectPath);
	}

	render() {
		const { config } = this.state;
		return <div className="init">

			<button onClick={this.chooseDir.bind(this)}  >请选择目录</button>
			<div>
				{config}
			</div>
			<div>
				<button onClick={this.lauch.bind(this)}>启动项目</button>
				{/* <button>启动项目</button> */}
			</div>
		</div>;
	}
}

export default Initial;